<template>
    <div>
        <h2>这是News</h2>
        <ul>
            <li v-for="i in newList" :key="i.id">
               <!-- 第一种写法 -->
                <!-- <RouterLink :to="`/news/detail/${i.id}/${i.title}/${i.content}`"> {{ i.title }}</RouterLink> -->
               <RouterLink :to="{
                    name:'info',
                    query:{
                        id:i.id,
                        title:i.title,
                        content:i.content
                    }
               }">{{ i.title }}</RouterLink>
            </li>
        </ul>
        <div>
            <RouterView></RouterView>
        </div>
    </div>
</template>
<script setup name="News">
import { reactive } from 'vue'
    import {RouterLink,RouterView} from 'vue-router'
    const newList=reactive([
        {id:"1",title:"新闻1",content:"详情1"},
        {id:"2",title:"新闻2",content:"详情2"},
        {id:"3",title:"新闻3",content:"详情3"},
    ])

</script>
